<template>
  <div style="position: relative">

    <Head/>
    <left/>
    <div style="position: absolute;top: 60px;left: 200px">
      <p>组织名称：<input type="text">
        <van-button>查询</van-button>
        <van-button>重置</van-button>
      </p>
      <p>
        <van-button style="background-color: cornflowerblue" @click="add">+新增</van-button>
        <van-uploader :after-read="upload" accept=".xls" style="background-color: cornflowerblue">+导入
        </van-uploader>
        <van-button @click="daochu">导出</van-button>
      </p>
      <p>
        <van-form v-show="show">
          <van-field label="请输入组织" v-model="form.name"></van-field>
          <van-radio-group v-model="form.zztype" direction="horizontal">
            <van-radio name="1">企业</van-radio>
            <van-radio name="2">部门</van-radio>
          </van-radio-group>
          <van-field label="请输入编码" v-model="form.zzcode"></van-field>
          <van-button @click="add_company">确定添加</van-button>

        </van-form>
      </p>
      <!--      <table border="1" cellspacing="0" style="width: 1000px;text-align: center">-->
      <!--        <tr>-->
      <!--          <td>名称</td>-->
      <!--          <td>编码</td>-->
      <!--          <td>类型</td>-->
      <!--          <td>操作</td>-->

      <!--        </tr>-->
      <!--        <tr v-for="i in zuzhi" :key="i.id">-->
      <!--          <td>{{ i.name }}</td>-->
      <!--          <td>{{ i.zzcode }}</td>-->
      <!--          <td v-if="i.zztype==1">企业</td>-->
      <!--          <td v-else>部门</td>-->
      <!--          <td>-->
      <!--            <van-button @click="updateshow(i.id)">新增下级</van-button>-->
      <!--          </td>-->

      <!--        </tr>-->
      <!--      </table>-->
      <div>
        <Getson :data="data" @pid="getpid"/>
      </div>
      <van-form v-show="xshow">
        <van-field label="请输入组织" v-model="form.name"></van-field>
        <van-radio-group v-model="form.zztype" direction="horizontal">
          <van-radio name="1">企业</van-radio>
          <van-radio name="2">部门</van-radio>
        </van-radio-group>
        <van-field label="请输入编码" v-model="form.zzcode"></van-field>
        <van-button @click="add_company">确定添加</van-button>

      </van-form>
    </div>


  </div>
</template>

<script>
import head from "@/components/head";
import left from "@/components/left";
import maxios from "@/http/axios";
import axios from 'axios';
import fileDownload from 'js-file-download'

import Getson from "@/components/getson";

export default {
  components: {
    Getson,
    'Head': head,
    'left': left
  },
  name: "zuzhi",
  data() {
    return {
      show: false,
      form: {'pid': 0},
      xshow: false,
      data: []
    }
  },
  methods: {
    add() {
      this.show = true
    },
    add_company() {
      maxios('/compan/add', 'post', this.form).then(res => {
        if (res.code == 200) {
          alert('添加成功')
          this.form = {}
        }
      })
    },

    upload(file) {
      console.log(file)
      let formdata = new FormData()
      formdata.append('file', file.file)
      console.log(formdata)
      axios({url: 'http://127.0.0.1:5000/compan/upload', method: 'post', data: formdata}).then(res => {
        if (res.code == 200) {

          alert('ok')
        }
      })

    },
    daochu(){
      maxios('/compan/download','get').then(res=>{
        fileDownload(res.data,'file.xls')
      })
    },
    updateshow(id) {
      this.form.pid = id
      this.xshow = true
      alert(id)
    },
    getdata() {
      maxios('/compan/add', 'get')
          .then(res => {
            this.data = res.list
          })
    },
    getpid(pid) {
      alert(pid)

    }
  },
  mounted() {
    this.getdata()
  }

}
</script>

<style scoped>


</style>